<template>
	<view class="app-tabbar-user" :style="[pageStyle, AppSkinVar]">
		<view v-for="item in componentsList" :key="item.key">
			<!-- 基础组件 -->
			<i-user-info v-if="item.components === 'userInfo'" :option="item.option"></i-user-info>
			<i-order-icon v-if="item.components === 'orderIcon'" :onShow="isShow" :downRefresh="isDownRefresh" :option="item.option"></i-order-icon>
			<i-account v-if="item.components === 'account'" :option="item.option"></i-account>
			<i-commonly-icon v-if="item.components === 'commonlyIcon'" :option="item.option"></i-commonly-icon>
			<!-- 商品类组件 -->
			<i-goods-group v-if="item.components === 'goodsGroup'" :option="item.option" />
			<i-whole-goods :hasReachBottom="index === componentsList.length - 1" v-if="item.components === 'wholeGoods'" :option="item.option" />
			<i-goods-tab v-if="item.components === 'goodsTab'" :option="item.option" />
			<i-goods-recommend v-if="item.components === 'goodsRecommend'" :option="item.option" />
			<i-goods-like v-if="item.components === 'goodsLike'" :option="item.option" />
			<i-boutique-recommend v-if="item.components === 'boutiqueRecommend'" :option="item.option" />
			<i-goods-banner v-if="item.components === 'goodsBanner'" :option="item.option" />
	
			<!-- 图文类组件 -->
			<i-notice v-if="item.components === 'notice'" :option="item.option" />
			<i-search v-if="item.components === 'search'" :option="item.option" hasCustomNavigation />
			<i-img-banner v-if="item.components === 'imgBanner'" :option="item.option" @pageBackgroundImageChange="setPageBackgroundImage" />
			<i-search-banner v-if="item.components === 'searchBanner'" :option="item.option" />
			<i-image v-if="item.components === 'image'" :option="item.option" />
			<i-hot v-if="item.components === 'hot'" :option="item.option" />
			<i-image-nav v-if="item.components === 'imageNav'" :option="item.option" />
			<i-magic-cube v-if="item.components === 'magicCube'" :option="item.option" />
			<i-list-nav v-if="item.components === 'listNav'" :option="item.option" />
			<i-blank v-if="item.components === 'blank'" :option="item.option" />
			<i-button-group v-if="item.components === 'buttonGroup'" :option="item.option" />
			<i-fixed-button v-if="item.components === 'fixedButton'" :option="item.option" />
			<i-porcelain v-if="item.components === 'porcelain'" :option="item.option" />
			<i-video v-if="item.components === 'video'" :option="item.option" />
			<i-my-rich-text v-if="item.components === 'richText'" :option="item.option" />
			<i-img-advert v-if="item.components === 'imgAdvert'" :option="item.option"></i-img-advert>
			<i-information  v-if="item.components === 'information' " :option="item.option" ></i-information>
		</view>
		<technical-support></technical-support>
	</view>
</template>

<script lang="ts">
import { ref, provide, reactive, defineComponent } from 'vue';
import layoutMainPageMixIn from '../utils/layoutMainPageMixIn';
import { useTabbar } from '../utils/customTabbar';
import { useLayoutMainPage } from '../utils/hooks';
import { useCurrentInstance } from '@/common/hooks';
import { storeToRefs } from 'pinia';
import { useUser } from '@/common/stores';

import { userPageContextKey } from '@/token';

export default defineComponent({
	mixins: [layoutMainPageMixIn],
	props: {
		index: {
			type: String,
			required: true
		}
	},
	emit: ['endRefresh'],
	setup(props,{emit}) {
		const ctx = useCurrentInstance();
		const userStore = useUser();
		const { isLogin } = storeToRefs(userStore);

		const isShow = ref(false);
		const isDownRefresh = ref(false);

		const { componentsList, pageStyle, setPageBackgroundImage, getPageInfo } = useLayoutMainPage(ctx);

		const { onShow, onHide,onPullDownRefresh, onReachBottom  } = useTabbar(props.index);

		getPageInfo(2);

		
		
		const handlePullDownRefresh = async () => {
			isDownRefresh.value = true;
			try {
				await userStore.getUserInfo();
			} catch {}
			isDownRefresh.value = false;
			emit('endRefresh');
		};
		
		const handleReachBottom = () => {
			uni.$emit('onUserPageReachBottom');
		};
		
		onShow(() => {
			isShow.value = true;
			if (isLogin.value) {
				userStore.getUserInfo();
			}
		});
		onHide(() => {
			isShow.value = false;
		});
		onPullDownRefresh(() => {
			handlePullDownRefresh()
		})
		onReachBottom(() => {
			handleReachBottom()
		})
		provide(
			userPageContextKey,
			reactive({
				contextId: 'user'
			})
		);

		return {
			isShow,
			isDownRefresh,
			componentsList,
			pageStyle,
			setPageBackgroundImage,
			getPageInfo
		};
	}
});
</script>
